<template>
<!-- 在template中只能有一个根元素 -->
  <div class="test-box">
    <div>这是自定义的test.vue组件--{{username}}</div>
    <button @click = "change">修改用户名</button>
  </div>
</template>

<script>
// 默认导出，固定写法
export default {
  // data数据源
  // 注意：.vue组件中的data 不能像之前一样，不能指向一个对象，而必须是一个函数。
  data(){
    // 里面要return一个{}
    return {
      username:"张三"
    }
  },
  methods:{
    change(){
      // console.log(this);
      // 在组件中 这里的this 表示当前组件的实例对象
      this.username = "李四";
    }
  },
  // 当前组件中的侦听器
  watch:{

  },
  // 当前组件中的计算属性
  computed:{

  },
  // 当前组件中的过滤器
  filters:{

  }
}
</script>

<style lang="less" scoped>
  .test-box {
    background-color: pink;
    div {
      font-size: 18px;
    }
  }
</style>